<script setup lang="ts">
import refresherAction from './hooks/refresheAction';
import listAction from './hooks/listAction.ts'

const emits = defineEmits(['refresher', 'load']);

const {
  refreshActive,
  circleIndex,
  refresherTouchstart,
  refresherTouchmove,
  refresherTouchend
} = refresherAction(emits);

const loading = defineModel('loading');

const finished = defineModel('finished');

const {
  contScroll,
} = listAction(emits, loading, finished);


</script>

<template>
  <div
      class="refresher-container"
      @touchstart="refresherTouchstart"
      @touchend="refresherTouchend"
      @touchmove="refresherTouchmove"

  >
    <div class="refresher-box" :class="{active: refreshActive}">
      <slot name="refresher">
        加载中
        <span
            class="icon-refresh"
            :class="{active: item == circleIndex}"
            v-for="(item, index) in 3"
            :key="index"
        />
      </slot>
    </div>
    <div class="container-box" @scroll="contScroll">
      <slot></slot>
      <template v-if="!refreshActive">
        <div class="loading-box" v-if="loading">
          加载中...
        </div>
        <div class="finished-box" v-if="!loading && finished">
          没有更多了
        </div>
      </template>
    </div>

  </div>
</template>

<style scoped lang="scss">
.refresher-container {
  height: 100%;

  .refresher-box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: $color-info;
    transition: all 0.3s;
    height: 0;
    overflow: hidden;

    .icon-refresh {
      display: inline-block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      border: 2px solid $color-info;
      margin: 0 2px;

      &:nth-child(3) {
        margin-right: 0;
      }

      &.active {
        border-color: transparent;
      }
    }

    &.active {
      height: 40px;
    }

  }

  .container-box{
    height: 100%;
    overflow-y: auto;
  }

  .loading-box, .finished-box{
    text-align: center;
    height: 40px;
    color: $color-info;
  }
}
</style>